<template>
    <el-dialog :title="title" :model-value="visible" width="520px" :fullscreen="mobile" class="dialog-content-clear" @close="handleClose">
      <el-alert :title="alert" type="warning" :closable="false" />
      <div class="ph-16">
        <div class="primary-section mt20">
          <el-space>
            <el-space>
              <span>费用名称</span>
              <span>{{ info.name }}</span>
            </el-space>
            <el-space>
              <span>账单金额</span>
              <span>+{{ info.money }}元</span>
            </el-space>
            <el-space>
              <span>待收日期</span>
              <span>{{ info.payTime }}</span>
            </el-space>
          </el-space>
        </div>
        <el-form :model="form" ref="formRef" label-position="top">
          <div class="primary-section mt20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="3" show-word-limit :max="150" placeholder="请填写备注信息"></el-input>
            </el-form-item>
          </div>
          <div class="primary-section mt20">
            <el-form-item label="凭证图片" prop="pictureUrlList">
              <el-row>
                <el-col :span="24">
                  <div class="fs-base fc-secondary">限3张，图片大小不超过10M</div>
                </el-col>
                <el-col :span="24">
                    <el-upload
                        v-model:file-list="fileList"
                        :action="uploadUrl"
                        :headers="headers"
                        list-type="picture-card"
                        :on-remove="handleImageRemove"
                        :before-upload="handleImageBeforeUpload"
                        :on-exceed="handleImageOnExceed"
                        :on-success="handleImageOnSuccess"
                        :multiple="true"
                        :auto-upload="false"
                        :limit="3"
                        accept="image/png, image/jpeg"
                        :class="{'is-full': fileList.length === 3}"
                        ref="picRef"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="danger" @click="handleOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
</template>
<script setup>
import useAppStore from '@/store/modules/app'
import { getToken } from '@/utils/auth'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
    visible: Boolean,
    type: {
        type: String,
        default: 'collection'
    },
    info: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload"); // 上传的图片服务器地址
const headers = ref({ authorization: getToken() })
const fileList = ref([])
const form = ref({
    remark: undefined
})

const mobile = computed(() => useAppStore().device === 'mobile')
const title = computed(() => {
  if (props.type === 'collection') return '收款'
  if (props.type === 'payment') return '付款'
  return '收款'
})
const alert = computed(() => {
  if (props.type === 'collection') return '提示：收款后账单将显示在完成账单中。'
  if (props.type === 'payment') return '提示：付款后账单将显示在完成账单中。'
  return '提示：收款后账单将显示在完成账单中。'
})


// 图片上传
function handleImageRemove(uploadFile, uploadFiles) {
  console.log(uploadFile, uploadFiles)
}
function handleImageBeforeUpload(file) {
  if (file.type.indexOf("image/") == -1) {
    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
    return false
  }
  const isLtSize = file.size / 1024 / 1024 < 2
  if (!isLtSize) {
    proxy.$modal.msgError("请上传小于2MB的图片。")
    return false
  }
  return true
}
// 当超出限制时，执行的钩子函数
function handleImageOnExceed(files) {
  proxy.$modal.msgWarning("最多只能选择三张图片")
}
function handleImageOnSuccess(res, file, files) {
  let count = 0
  let picUrl = []
  files.forEach(item => {
    if (item.response && item.response.code !== 200) {
      proxy.$modal.msgError(item.name + '上传失败：' + item.response.msg)
    } else {
      count++
      picUrl.push({
        name: item.response ? item.response.data.name : item.name,
        url: item.response ? item.response.data.url : item.url,
      })
    }
  })
  if (count === fileList.value.length) {
    emit('ok', { ...form.value, picUrl: JSON.stringify(picUrl) })
  }
}

function handleClose() {
    emit('cancel')
}
function handleOk() {
  emit('ok', { ...form.value })
}
</script>